<template>
  <div id="home">
    <el-row>
      <el-carousel ref="carousel" :height="pageHeight + 'px'" indicator-position="none" arrow="never" :interval="5000" @mouseenter.native="delHandleMouseEnter">
        <el-carousel-item>
          <div :class="{ title_div_phone:!isPC,title_div_pc:isPC}">
            <div class="title_zh">数字化共享工厂</div>
            <div class="title_en">Digital shared factory</div>
          </div>
          <img :src="require('../assets/img/carousel3.jpg')" />
        </el-carousel-item>
        <el-carousel-item>
          <div :class="{ title_div_phone:!isPC,title_div_pc:isPC}">
            <div class="title_zh">3C类与设备类产品总装代工</div>
            <div class="title_en" style="max-width: 80%;">3C and equipment products assembly and OEM</div>
          </div>
          <img :src="require('../assets/img/carousel2.jpg')" />
        </el-carousel-item>
        <el-carousel-item>
          <div :class="{ title_div_phone:!isPC,title_div_pc:isPC}">
            <div class="title_zh">3C产品研发设计制造</div>
            <div class="title_en" style="max-width: 80%;">3C product development, design and manufacture</div>
          </div>
          <img :src="require('../assets/img/carousel5.jpg')" />
        </el-carousel-item>
        <el-carousel-item>
          <div :class="{ title_div_phone:!isPC,title_div_pc:isPC}">
            <div class="title_zh">制造型企业信息化解决方案提供</div>
            <div class="title_en" style="max-width: 80%;">Information technology solutions provider for manufacturing enterprises</div>
          </div>
          <img :src="require('../assets/img/carousel4.jpg')" />
        </el-carousel-item>
      </el-carousel>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageHeight: 0,
      isPC: document.documentElement.clientWidth > 800
    }
  },
  mounted () {
    this.getPageHeight()
    this.delHandleMouseEnter()
    // 监控浏览器大小变化，调整页面的布局
    window.onresize = () => {
      this.getPageHeight()
      if (document.documentElement.clientWidth < 800) {
        this.isPC = false
      } else {
        this.isPC = true
      }
    }
  },
  methods: {
    getPageHeight () {
      this.pageHeight = window.innerHeight
    },
    delHandleMouseEnter () {
      this.$refs.carousel.handleMouseEnter = () => { }
    }
  }
}
</script>
<style lang="less">
#home {
  .title_div_pc {
    position: fixed;
    top: 60%;
    left: 15%;
    z-index: 999;
    .title_zh {
      color: white;
      font-size: 4vw;
      font-weight: bold;
      text-shadow: 3px 3px 5px #1f1e1e
    }
    .title_en {
      color: #F2F6FC;
      font-size: 3vw;
      font-weight: bold;
      text-shadow: 3px 3px 5px #1f1e1e
    }
  }
  .title_div_phone {
    position: fixed;
    top: 75%;
    left: 10%;
    z-index: 999;
    .title_zh {
      color: white;
      font-size: 7vw;
      font-weight: bold;
      text-shadow: 3px 3px 5px #1f1e1e
    }
    .title_en {
      color: #F2F6FC;
      font-size: 6vw;
      font-weight: bold;
      text-shadow: 3px 3px 5px #1f1e1e
    }
  }
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
</style>
